<template>
  <div class="fixed inset-0 overflow-hidden">
    <!-- 主背景渐变 - 白色基调 -->
    <div class="absolute inset-0 bg-gradient-to-br from-white via-[#faf8f5] to-[#f5f1eb]" />

    <!-- 弥散渐变层 -->
    <div class="absolute inset-0">
      <!-- 香槟色光晕 -->
      <div
        class="absolute w-[800px] h-[800px] rounded-full"
        :style="{
          background: 'radial-gradient(circle, rgba(245, 222, 179, 0.45) 0%, transparent 70%)',
          filter: 'blur(60px)',
          transform: `translate(${champagneX}px, ${champagneY}px)`,
          opacity: champagneOpacity,
        }"
      />

      <!-- 金色光晕 -->
      <div
        class="absolute w-[700px] h-[700px] rounded-full right-0 top-0"
        :style="{
          background: 'radial-gradient(circle, rgba(218, 165, 32, 0.35) 0%, transparent 70%)',
          filter: 'blur(80px)',
          transform: `translate(${goldX}px, ${goldY}px)`,
          opacity: goldOpacity,
        }"
      />

      <!-- 浅香槟光晕 -->
      <div
        class="absolute w-[600px] h-[600px] rounded-full bottom-0 left-1/2"
        :style="{
          background: 'radial-gradient(circle, rgba(255, 243, 224, 0.6) 0%, transparent 70%)',
          filter: 'blur(70px)',
          transform: `translate(${lightChampagneX}px, ${lightChampagneY}px)`,
          opacity: lightChampagneOpacity,
        }"
      />
    </div>

    <!-- 几何图形层 -->
    <div class="absolute inset-0">
      <div
        v-for="shape in shapes"
        :key="shape.id"
        class="absolute rounded-full"
        :style="{
          width: `${shape.size}px`,
          height: `${shape.size}px`,
          left: `${shape.x}%`,
          top: `${shape.y}%`,
          background:
            'linear-gradient(135deg, rgba(218, 165, 32, 0.15) 0%, rgba(245, 222, 179, 0.12) 100%)',
          backdropFilter: 'blur(20px)',
          border: '1px solid rgba(218, 165, 32, 0.2)',
          boxShadow: '0 8px 32px 0 rgba(218, 165, 32, 0.15)',
          transform: `translate(${shape.currentX}px, ${shape.currentY}px) scale(${shape.currentScale})`,
          opacity: shape.currentOpacity,
        }"
      />
    </div>

    <!-- 三角形网络层 -->
    <div class="absolute inset-0">
      <svg width="100%" height="100%" class="absolute inset-0">
        <g v-for="triangle in triangles" :key="triangle.id">
          <!-- 动态三角形 -->
          <g :style="{ opacity: triangle.currentOpacity }">
            <!-- 绘制三条边 -->
            <line
              v-for="(point, idx) in triangle.points"
              :key="`line-${idx}`"
              :x1="`${point.currentX}%`"
              :y1="`${point.currentY}%`"
              :x2="`${triangle.points[(idx + 1) % 3].currentX}%`"
              :y2="`${triangle.points[(idx + 1) % 3].currentY}%`"
              stroke="rgba(218, 165, 32, 0.5)"
              stroke-width="1.5"
            />

            <!-- 绘制顶点圆点 -->
            <circle
              v-for="(point, idx) in triangle.points"
              :key="`point-${idx}`"
              :cx="`${point.currentX}%`"
              :cy="`${point.currentY}%`"
              :r="point.currentR"
              fill="rgba(218, 165, 32, 0.8)"
              filter="drop-shadow(0 0 6px rgba(218, 165, 32, 0.6))"
            />
          </g>
        </g>
      </svg>
    </div>

    <!-- 网格线 - 科技感 -->
    <div class="absolute inset-0 opacity-[0.06]">
      <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <pattern id="grid" width="80" height="80" patternUnits="userSpaceOnUse">
            <path
              d="M 80 0 L 0 0 0 80"
              fill="none"
              stroke="rgba(218, 165, 32, 0.4)"
              stroke-width="1"
            />
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#grid)" />
      </svg>
    </div>

    <!-- 顶部光晕装饰 -->
    <div
      class="absolute top-0 left-1/2 w-full h-[300px]"
      :style="{
        background: 'linear-gradient(180deg, rgba(255, 243, 224, 0.4) 0%, transparent 100%)',
        transform: 'translateX(-50%)',
        opacity: topGlowOpacity,
      }"
    />

    <!-- 噪点纹理 -->
    <div
      class="absolute inset-0 opacity-[0.02]"
      :style="{
        backgroundImage: `url('data:image/svg+xml,%3Csvg viewBox=\'0 0 400 400\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cfilter id=\'noiseFilter\'%3E%3CfeTurbulence type=\'fractalNoise\' baseFrequency=\'0.9\' numOctaves=\'4\' stitchTiles=\'stitch\'/%3E%3C/filter%3E%3Crect width=\'100%25\' height=\'100%25\' filter=\'url(%23noiseFilter)\'/%3E%3C/svg%3E')`,
      }"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

interface FloatingShape {
  id: number
  size: number
  x: number
  y: number
  duration: number
  delay: number
  currentX: number
  currentY: number
  currentScale: number
  currentOpacity: number
  targetX: number
  targetY: number
  targetScale: number
  targetOpacity: number
  startX: number
  startY: number
  startScale: number
  startOpacity: number
  progress: number
}

interface TrianglePoint {
  x: number
  y: number
  moveX: number
  moveY: number
  currentX: number
  currentY: number
  currentR: number
  targetX: number
  targetY: number
  targetR: number
  startX: number
  startY: number
  startR: number
  progress: number
}

interface Triangle {
  id: number
  points: [TrianglePoint, TrianglePoint, TrianglePoint]
  duration: number
  delay: number
  currentOpacity: number
  targetOpacity: number
  startOpacity: number
  progress: number
}

const shapes = ref<FloatingShape[]>([])
const triangles = ref<Triangle[]>([])

// 动画控制变量
const champagneX = ref(0)
const champagneY = ref(0)
const champagneOpacity = ref(0.5)

const goldX = ref(0)
const goldY = ref(0)
const goldOpacity = ref(0.5)

const lightChampagneX = ref(0)
const lightChampagneY = ref(0)
const lightChampagneOpacity = ref(0.5)

const topGlowOpacity = ref(0.5)

// 动画时间戳
let lastTime = 0

// 生成随机浮动几何图形
const generateShapes = () => {
  const newShapes: FloatingShape[] = []
  for (let i = 0; i < 15; i++) {
    const shape: FloatingShape = {
      id: i,
      size: Math.random() * 400 + 150,
      x: Math.random() * 100,
      y: Math.random() * 100,
      duration: Math.random() * 15 + 10,
      delay: Math.random() * 3,
      currentX: 0,
      currentY: 0,
      currentScale: 1,
      currentOpacity: 0.5,
      targetX: Math.random() * 100 - 50,
      targetY: Math.random() * 100 - 50,
      targetScale: 1.3,
      targetOpacity: 0.8,
      startX: 0,
      startY: 0,
      startScale: 1,
      startOpacity: 0.5,
      progress: 0,
    }
    newShapes.push(shape)
  }
  shapes.value = newShapes
}

// 生成三角形网络
const generateTriangles = () => {
  const newTriangles: Triangle[] = []
  const triangleCount = 6

  for (let i = 0; i < triangleCount; i++) {
    const baseX = Math.random() * 80 + 10 // 10-90%
    const baseY = Math.random() * 80 + 10 // 10-90%

    const triangle: Triangle = {
      id: i,
      points: [
        {
          x: baseX,
          y: baseY,
          moveX: (Math.random() - 0.5) * 20,
          moveY: (Math.random() - 0.5) * 20,
          currentX: baseX,
          currentY: baseY,
          currentR: 4,
          targetX: baseX + (Math.random() - 0.5) * 20,
          targetY: baseY + (Math.random() - 0.5) * 20,
          targetR: 5,
          startX: baseX,
          startY: baseY,
          startR: 4,
          progress: 0,
        },
        {
          x: baseX + Math.random() * 30 - 15,
          y: baseY + Math.random() * 30 - 15,
          moveX: (Math.random() - 0.5) * 20,
          moveY: (Math.random() - 0.5) * 20,
          currentX: baseX + Math.random() * 30 - 15,
          currentY: baseY + Math.random() * 30 - 15,
          currentR: 4,
          targetX: baseX + Math.random() * 30 - 15 + (Math.random() - 0.5) * 20,
          targetY: baseY + Math.random() * 30 - 15 + (Math.random() - 0.5) * 20,
          targetR: 5,
          startX: baseX + Math.random() * 30 - 15,
          startY: baseY + Math.random() * 30 - 15,
          startR: 4,
          progress: 0,
        },
        {
          x: baseX + Math.random() * 30 - 15,
          y: baseY + Math.random() * 30 - 15,
          moveX: (Math.random() - 0.5) * 20,
          moveY: (Math.random() - 0.5) * 20,
          currentX: baseX + Math.random() * 30 - 15,
          currentY: baseY + Math.random() * 30 - 15,
          currentR: 4,
          targetX: baseX + Math.random() * 30 - 15 + (Math.random() - 0.5) * 20,
          targetY: baseY + Math.random() * 30 - 15 + (Math.random() - 0.5) * 20,
          targetR: 5,
          startX: baseX + Math.random() * 30 - 15,
          startY: baseY + Math.random() * 30 - 15,
          startR: 4,
          progress: 0,
        },
      ] as [TrianglePoint, TrianglePoint, TrianglePoint],
      duration: Math.random() * 10 + 15,
      delay: Math.random() * 5,
      currentOpacity: 0.4,
      targetOpacity: 0.8,
      startOpacity: 0.4,
      progress: 0,
    }

    newTriangles.push(triangle)
  }

  triangles.value = newTriangles
}

// 动画更新函数
const updateAnimations = (timestamp: number) => {
  if (!lastTime) lastTime = timestamp
  lastTime = timestamp

  // 更新香槟色光晕动画
  const champTime = timestamp * 0.001
  champagneX.value = Math.sin(champTime * 0.05) * 100 - 50
  champagneY.value = Math.cos(champTime * 0.04) * 100 - 50
  champagneOpacity.value = 0.5 + Math.sin(champTime * 0.1) * 0.15

  // 更新金色光晕动画
  const goldTime = timestamp * 0.001
  goldX.value = Math.cos(goldTime * 0.06) * 100 - 50
  goldY.value = Math.sin(goldTime * 0.07) * 100 - 50
  goldOpacity.value = 0.5 + Math.cos(goldTime * 0.12) * 0.15

  // 更新浅香槟光晕动画
  const lightChampTime = timestamp * 0.001
  lightChampagneX.value = Math.sin(lightChampTime * 0.04) * 100 - 50
  lightChampagneY.value = Math.cos(lightChampTime * 0.05) * 100 - 50
  lightChampagneOpacity.value = 0.6 + Math.sin(lightChampTime * 0.08) * 0.1

  // 更新顶部光晕动画
  topGlowOpacity.value = 0.5 + Math.sin(timestamp * 0.001) * 0.15

  // 更新形状动画
  shapes.value.forEach((shape) => {
    const timeInCycle = (timestamp * 0.001) % shape.duration
    const progress = timeInCycle / shape.duration

    // 使用正弦函数创建平滑的往返动画
    const smoothProgress = (Math.sin(progress * Math.PI * 2 - Math.PI / 2) + 1) / 2

    shape.currentX = shape.targetX * smoothProgress
    shape.currentY = shape.targetY * smoothProgress
    shape.currentScale = shape.startScale + (shape.targetScale - shape.startScale) * smoothProgress
    shape.currentOpacity =
      shape.startOpacity + (shape.targetOpacity - shape.startOpacity) * smoothProgress
  })

  // 更新三角形动画
  triangles.value.forEach((triangle) => {
    const timeInCycle = (timestamp * 0.001) % triangle.duration
    const progress = timeInCycle / triangle.duration

    // 使用正弦函数创建平滑的往返动画
    const smoothProgress = (Math.sin(progress * Math.PI * 2 - Math.PI / 2) + 1) / 2

    triangle.currentOpacity =
      triangle.startOpacity + (triangle.targetOpacity - triangle.startOpacity) * smoothProgress

    // 更新三角形顶点
    triangle.points.forEach((point) => {
      point.currentX = point.startX + (point.targetX - point.startX) * smoothProgress
      point.currentY = point.startY + (point.targetY - point.startY) * smoothProgress
      point.currentR = point.startR + (point.targetR - point.startR) * smoothProgress
    })
  })

  requestAnimationFrame(updateAnimations)
}

onMounted(() => {
  generateShapes()
  generateTriangles()
  requestAnimationFrame(updateAnimations)
})

onUnmounted(() => {
  lastTime = 0
})
</script>

<style scoped>
.fixed {
  position: fixed;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.overflow-hidden {
  overflow: hidden;
}

.absolute {
  position: absolute;
}

.w-\[800px\] {
  width: 800px;
}

.h-\[800px\] {
  height: 800px;
}

.w-\[700px\] {
  width: 700px;
}

.h-\[700px\] {
  height: 700px;
}

.w-\[600px\] {
  width: 600px;
}

.h-\[600px\] {
  height: 600px;
}

.rounded-full {
  border-radius: 50%;
}

.right-0 {
  right: 0;
}

.top-0 {
  top: 0;
}

.bottom-0 {
  bottom: 0;
}

.left-1\/2 {
  left: 50%;
}

.w-full {
  width: 100%;
}

.h-\[300px\] {
  height: 300px;
}

.bg-gradient-to-br {
  background: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.from-white {
  --tw-gradient-from: #ffffff;
}

.via-\[\#faf8f5\] {
  --tw-gradient-via: #faf8f5;
}

.to-\[\#f5f1eb\] {
  --tw-gradient-to: #f5f1eb;
}

.opacity-\[0\.06\] {
  opacity: 0.06;
}

.opacity-\[0\.02\] {
  opacity: 0.02;
}

.left-1\/2 {
  left: 50%;
}

.transform {
  transform: translateX(-50%);
}

/* 这些类需要通过Tailwind配置或直接在style标签中定义 */
</style>
